<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/element.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="../js/vue.min.js"></script>
<script src="../js/element.js"></script>

<div class="layout">
  <h2>实例</h2>
  <!-- 模型一 -->
  <h3>模型一：文本展示</h3>
  <div id="app">
    <p>
      {{ message }}
    </p>
    <p>代码内容：{{rawHtml}},源代码:<sapn v-html="rawHtml"></sapn></p>
  </div>
  <div class="context-box">
    <xmp>
      <div id="app">
        <p>
          {{ message }}
        </p>
        <p>代码内容：{{rawHtml}},源代码:<sapn v-html="rawHtml"></sapn></p>
      </div>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!This First Model',
          rawHtml: '<span style="color:red">代码实例</span>'
        }
      })

    </xmp>
  </div>

  <el-divider></el-divider>

  <h3>模型二：悬停提示信息</h3>
  <!-- 模型二 -->
  <div id="app-2">
    <span v-bind:title="message">
      v-bind 鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
  </div>
  <div class="context-box">
    <xmp>
      <div id="app-2">
        <span v-bind:title="message">
          v-bind 鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
      </div>

      var app2 = new Vue({
        el: '#app-2',
        data: {
          message: '页面加载于 ' + new Date().toLocaleString()
        }
      })

    </xmp>
  </div>

  <el-divider></el-divider>

  <h3>模型三：元素是否可见</h3>
  <!-- 模型三 元素是否显示 -->
  <div id="app-3">
    <p v-if="seen">v-if=seen控制是否可见，现在你看到我了，根据表达值seen的真假来判定</p>
  </div>
  <div class="context-box">
    <xmp>
      <div id="app-3">
        <p v-if="seen">v-if=seen控制是否可见，现在你看到我了，根据表达值seen的真假来判定</p>
      </div>

      var app3 = new Vue({
        el: '#app-3',
        data: {
          seen: true
        }
      })

    </xmp>
  </div>
  <el-divider></el-divider>

  <h3>模型四：循环指令</h3>
  <!-- 模型四 v-for 指令-->
  <div id="app-4">
    <p >v-for循环输出打印</p>
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>
  <div class="context-box">
    <xmp>
      <div id="app-4">
        <p >v-for循环输出打印</p>
        <ol>
          <li v-for="todo in todos">
            {{ todo.text }}
          </li>
        </ol>
      </div>

      var app4 = new Vue({
        el: '#app-4',
        data: {
          todos: [
            { text: '学习 JavaScript' },
            { text: '学习 Vue' },
            { text: '整个牛项目' }
          ]
        }
      })

    </xmp>
  </div>
  <el-divider></el-divider>

  <h3>模型五：动作和方法绑定</h3>
  <!-- 动作和方法的绑定 -->
  <div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
  </div>
  <div class="context-box">
    <xmp>
      <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
      </div>

      var app5 = new Vue({
        el: '#app-5',
        data: {
          message: 'Hello Vue.js!v-on增加方法监控'
        },
        methods: {
          reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
          }
        }
      })
      

    </xmp>
  </div>
  <el-divider></el-divider>

  <h3>模型六：输入与展示同步</h3>
  <!--表单输入和应用状态绑定-->
  <div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>
  <div class="context-box">
    <xmp>
      <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
      </div>

      var app6 = new Vue({
        el: '#app-6',
        data: {
          message: 'Hello Vue!'
        }
      })

    </xmp>
  </div>
  <el-divider></el-divider>

  <h3>模型七：自定义组件</h3>
  <div id="app-7">
    <p >高级功能定义组件</p>
    <ol>
      <!--
        现在我们为每个 todo-item 提供 todo 对象
        todo 对象是变量，即其内容可以是动态的。
        我们也需要为每个组件提供一个“key”，稍后再
        作详细解释。
      -->
      <todo-item
        v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></todo-item>
    </ol>
  </div>
  <div class="context-box">
    <xmp>
      <div id="app-7">
        <p >高级功能定义组件</p>
        <ol>
          <!--
            现在我们为每个 todo-item 提供 todo 对象
            todo 对象是变量，即其内容可以是动态的。
            我们也需要为每个组件提供一个“key”，稍后再
            作详细解释。
          -->
          <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
          ></todo-item>
        </ol>
      </div>

      Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
      })
      
      var app7 = new Vue({
        el: '#app-7',
        data: {
          groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '随便其它什么人吃的东西' }
          ]
        }
      })

    </xmp>
  </div>
</div>

<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script type="text/javascript" src="../js/vue.min.js"></script>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!This First Model',
    rawHtml: '<span style="color:red">代码实例</span>'
  }
})


var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!v-on增加方法监控'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})


var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})
</script>

